import React from "react";
import { BrowserRouter as Router, Routes, Route,useNavigate } from "react-router-dom";
// import TodoListPage from "./pages/TodoListPage";
import ChildrenToParent from "./pages/ChildrenToParent";
// import Game from "./pages/Game";
import Props from "./pages/Props";
import UseCallback from "./pages/UseCallback";
import UseContext from "./pages/UseContext";
import UseEffect from "./pages/UseEffect";
import UseMemo from "./pages/UseMemo";
import UseReducer from "./pages/UseReducer";
import UseRef from "./pages/UseRef";
import UseState from "./pages/UseState";
function MyButton({route}) {  
    let navigate = useNavigate();
    if(route.br){
        return (
            <>
            <button style={{margin:'10px'}} onClick={() => navigate(route.path)}>  
              {route.buttonName}
            </button>  
            <br></br>
            </>
          ); 
    }
    return (
      <button style={{margin:'10px'}} onClick={() => navigate(route.path)}>  
        {route.buttonName}
      </button>  
    );  
  }
const NiceFishRoutes = props => {
    const routes = [
        // {
        //     path: "/TodoListPage",
        //     buttonName:"TodoListPage",
        //     element: <TodoListPage/>,
        //     br:true
        // },
        {
            path: "/UseState",
            buttonName:"UseState",
            element: <UseState/>,
        },
        {
            path: "/Props",
            buttonName:"Props",
            element: <Props/>,
        },
        {
            path: "/ChildrenToParent",
            buttonName:"ChildrenToParent",
            element: <ChildrenToParent/>,
        },
        {
            path: "/UseContext",
            buttonName:"UseContext",
            element: <UseContext/>,
        },
        // {
        //     path: "/Game",
        //     buttonName:"Game",
        //     element: <Game/>,
        // },
        {
            path: "/UseReducer",
            buttonName:"UseReducer",
            element: <UseReducer/>,
        },
        {
            path: "/UseRef",
            buttonName:"UseRef",
            element: <UseRef/>,
        },
        {
            path: "/UseEffect",
            buttonName:"UseEffect",
            element: <UseEffect/>,
        },
        {
            path: "/UseMemo",
            buttonName:"UseMemo",
            element: <UseMemo/>,
        },
        {
            path: "/UseCallback",
            buttonName:"UseCallback",
            element: <UseCallback/>,
        } 
    ];

    /**
     * 递归渲染路由。
     * @param {*} routes Tree node, with children to be rendered recursively.
     * @returns 
     */
    const doRenderRoutes = (routes) => {
        return routes.map((route) => {
            return (
                <Route
                    key={route.path}
                    path={route.path}
                    element={route.element}
                >
                    {route.children && doRenderRoutes(route.children)}
                </Route>
            );
        });
    };
    const doRenderButton = (routes) => {
        return routes.map((route) => {
            return (
                <MyButton key={route.path} route={route} />
            );
        });
    };
    return (
        <Router>
            {doRenderButton(routes)}
            <Routes>
                {doRenderRoutes(routes)}
            </Routes>
        </Router>
    );
}

export default NiceFishRoutes;